<template>
<!--  主页面-->
<div>
<!--  导航栏-->
              <div class="navbar">

                  <el-menu
                    :default-active="activeIndex2"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleSelect"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b">
<!--                    -->

                    <el-menu-item index="1">
                      <img src="../assets/logotiantai.svg" style="width: 77px; margin-left: -20px"/>
                    </el-menu-item>
                    <el-menu-item index="1">学生</el-menu-item>
                    <el-submenu index="2">
                      <template slot="title">老师</template>
                      <el-menu-item index="2-1">选项1</el-menu-item>
                      <el-menu-item index="2-2">选项2</el-menu-item>
                      <el-menu-item index="2-3">选项3</el-menu-item>
                      <el-submenu index="2-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="2-4-1">选项1</el-menu-item>
                        <el-menu-item index="2-4-2">选项2</el-menu-item>
                        <el-menu-item index="2-4-3">选项3</el-menu-item>
                      </el-submenu>
                    </el-submenu>
                    <el-menu-item index="4">企业</el-menu-item>
                    <el-menu-item index="3" disabled>帮助</el-menu-item>
                    <el-menu-item index="5">
                      <router-link to="/login">登录</router-link>
                    </el-menu-item>
                  </el-menu>
              </div>
      <div class="middle">
<!--侧边栏-->
                   <div class="sidebar">
                        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
                          <el-radio-button :label="false">展开</el-radio-button>
                          <el-radio-button :label="true">收起</el-radio-button>
                        </el-radio-group>
                        <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
                          <el-submenu index="1">
                            <template slot="title">
                              <i class="el-icon-location"></i>
                              <span slot="title">学生基本信息</span>
                            </template>
                            <el-menu-item-group>
                              <span slot="title">分组一</span>
                              <el-menu-item class="conceal" index="1-1" @click="isShow = !isShow">家庭基本信息
                              </el-menu-item>

                                    <!--显示信息-->
                                    <div class="box" v-if="isShow">
                                      <li style="background: wheat; width: 1000px; height: 30px"></li>
                                        <table>
                                          <tr style="color: burlywood">
                                            <th>编号</th>
                                            <th>姓名</th>
                                            <th>性别</th>
                                            <th>地址</th>
                                            <th>年龄</th>
                                            <th>电话</th>
                                            <th>更改</th>
                                          </tr>
<!--                                          <tr>-->
<!--                                            <td>1</td>-->
<!--                                            <td>张三</td>-->
<!--                                            <td>男</td>-->
<!--                                            <td>石家庄</td>-->
<!--                                            <td>16</td>-->
<!--                                              <td>111</td>-->
<!--                                            <td><span>添加</span> <span >删除</span></td>-->
<!--                                          </tr>-->
                                         <tr v-for="student in students">
                                           <td>{{student.id}}</td>
                                           <td>{{student.name}}</td>
                                           <td>{{student.sex}}</td>
                                           <td>{{student.address}}</td>
                                           <td>{{student.age}}</td>
                                           <td>{{student.phone}}</td>
                                           <th>
                                             <a :href="'#/home/emi?id='+student.id" class="increase">编辑</a>
                                             <a href="javascript:;"  @click="de(student.id)" class="delete">删除</a>
                                           </th>
                                         </tr>
                                        </table>
                                    </div>

                              <el-menu-item index="1-2">学习状况&ensp;&ensp;&ensp;&ensp;</el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group title="分组2">
                              <el-menu-item index="1-3">在校是否违规</el-menu-item>
                            </el-menu-item-group>
                            <el-submenu index="1-4">
                              <span slot="title">选项4</span>
                              <el-menu-item index="1-4-1">选项1</el-menu-item>
                            </el-submenu>
                          </el-submenu>
                          <el-menu-item index="2">
                            <i class="el-icon-menu"></i>
                            <span slot="title">学生访谈登记</span>
                          </el-menu-item>
                          <el-menu-item index="3" disabled>
                            <i class="el-icon-document"></i>
                            <span slot="title">模拟面试</span>
                          </el-menu-item>
                          <el-menu-item index="4">
                            <i class="el-icon-setting"></i>
                            <span slot="title">就业意向</span>
                          </el-menu-item>
                           </el-menu>
                     </div>
      </div>
</div>
</template>

<script type="javascript">
export default {
  name: "home",
  data() {
    return{
      activeIndex2: '1',
      isCollapse: true,
      isShow: true,
      students:[]
    }
  },
  methods:{
    findAll(){
      this.$http.get('http://localhost:8082/student/findAll').then(res=>{
        console.log(res)
      this.students = res.data;
      })
    },
    de(id){
      if(confirm("你确定要删除吗？")){
        this.$http.get('http://localhost:8082/student/de?id='+id).then(res=>{
          if (res.data.result){
            this.findAll();//删除成功重新刷新
          }
        })
      }
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },

  },
  created() {
    this.findAll();
  },
  watch:{
    $route:{
      handler:function (val,value){
        if (val.path=="/home"){
          this.findAll();
        }
      }
    }
  }

}
</script>

<style scoped>
*{
  text-decoration: none;
  list-style: none;
}

.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

/*侧边栏*/
.middle{
  overflow: hidden;
}
.sidebar{
  /*float: left;*/
  /*position: relative;*/
  /*width: 20%;*/
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-radio-group{
  /*position: absolute;*/
  /*left: 0px;*/
  /*height: 40px;*/
}

/*显示信息*/
/*1、家庭基本信息*/
.conceal{
  position: relative;
}
.box{
  width: 1000px;
  height: 300px;
/*background: red;*/
  position: absolute;
  left: 200px;
  top: -55px;
  border: 2px solid blanchedalmond;
}
.box tr .increase{
  color: saddlebrown;
}
.box tr .delete{
 color: #B3C0D1;
}
.box th{
padding: 5px 50px;
}
.box td{
  margin: 0;
  padding: 5px 35px;
  border-bottom: 1px solid black;
  border-right: 1px solid black ;
}
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
/*.conceal:hover .box{*/
/*  display: block;*/
/*}*/
</style>
